<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body layout:fragment="content">
<div id="from">
    <el-form :inline="false" label-width="100px" :model="user"  ref="user" :rules="rules"  style="padding: 30px;">

        <el-form-item label="登录名:" prop="loginName" >
            <el-input v-model="user.loginName" ></el-input>
        </el-form-item>
        <el-form-item label="用户名:" prop="username">
            <el-input v-model="user.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password" >
            <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="电话号码:" prop="mobilePhone" >
            <el-input v-model="user.mobilePhone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email" >
            <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-row style="text-align: center">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
            <el-button @click="cancel()">取消</el-button>
        </el-row>
    </el-form>
</div>
<script>

    //var id=RequestUtils.getId();

    var vm=new Vue({
        el: '#from',
        data:function () {
            var id=top.vm.getVmId();
            var user=ajaxGet("/sys/user/read",{id:id});
            var rules={
                loginName:{ required: true, message: '请输入登录名!', trigger: 'blur' },
                username:{ required: true, message: '请输入用户名!', trigger: 'blur' },
                password:{  min: 6, max: 18,required: true, message: '密码长度在6-18之间!', trigger: 'blur' },
                mobilePhone:{ required: false, message: '请输入邮箱!', trigger: 'blur' },
                email:{ required: false, message: '请输入邮箱!', trigger: 'blur' }
            };
            return {
                user:user,
                rules:rules
            };
        },
        methods:{
            onSubmit:function () {
                this.$refs['user'].validate(function(valid) {
                    if (valid) {
                        //top.
                        top.vm.$confirm('确定保存?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'info '
                         }).then(() => {
                            var res=ajaxPost("/sys/user/save",vm.user);
                            if(res == true){
                                top.vm.$message({type: 'success', message: '保存成功!'});
                                vm.closeParentDialog();
                                top.vm.dialogInfo.vm.refresh();
                            }else{
                                top.vm.$message({type: 'success', message: '登录名已存在!'});
                            }

                         });
                    }
                });

            },
            cancel:function () {
                this.closeParentDialog();
            },
            closeParentDialog:function(){
                top.vm.$data.dialogInfo.dialogVisible=false;
            },
            resetForm:function(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</body>
</html>